<template>
  <div>
    <el-container>
      <el-header>
        <el-input placeholder="请输入您的姓名小写首字母" v-model="name" @input="checkUsr"></el-input>
      </el-header>
      <el-main v-show="name">
        <video class="video" controls="controls" :src="mvUrl">
          your browser does not support the video tag
        </video>
      </el-main>
      <el-main v-show="name">
        <p class="collect">彩虹屁收集</p>
        <div v-for="(item,index) in rainbow" style="margin-top: 20px;font-size: 15px">
          <el-button type="success" icon="el-icon-check" circle @click="rainbowGet(index)"></el-button>
          <span>{{rainbow[index]}}</span><span ref="test" v-show="isShow"> </span>
        </div>
      </el-main>
      <el-footer v-show="name">
        <transition name="el-zoom-in-center">
          <div v-show="true" class="transition-box">
            <el-input placeholder="访问者等级:" :disabled="true" ref="rank" :value="access">
            </el-input>
          </div>
        </transition>
      </el-footer>
    </el-container>
  </div>

</template>
<script>
  import {getRainBow} from 'network/rainbow'
  export default {
    data() {
      return {
        isShow:false,
        name: '',
        vipRank: '',
        rainbow: [''],
        access: '',
        mvUrl: 'https://apd-4b797a844d52e31af99c35ec1f7e48b2.v.smtcdns.com/mv.music.tc.qq.com/Av5Mop88uEUFYYdKmi05yDqquhAqVkOvUmIalCvSdygc/53917470967D0DCB0C5A13F26374B740A3D2A021F9BF672562B79B5CAC72262F705E07C2071B74E949F9589C7015448DZZqqmusic_default/1049_M0106194002rS43Q435F4s1001728826.f9844.mp4?fname=1049_M0106194002rS43Q435F4s1001728826.f9844.mp4'
      }
    },
    methods:{
      rainbowGet(index){
        getRainBow().then(result => this.rainbow.splice(index,1,result.newslist[0].content)).catch(reason => this.rainbow.splice(index,1,'今日彩虹屁已停业！'))
      },
      checkUsr(){
        if(this.name === 'wy'){
          this.rainbow = ['','','']
          this.vipRank = 3
          this.access = '终极用户，提供彩虹屁三条，周董MV'
          this.mvUrl = 'https://apd-e5a05f9a8e1d9994b1552e014219b3c8.v.smtcdns.com/mv.music.tc.qq.com/AYY5xxZ3ghYNJ_lrw_vmWkUlMFy2hReVh3sdSnNCDKRE/D62D1E2EB5AD39132FFEC6062BE945D9C4387D454FF021C0BC73F5D102080694BA08BBE651557B87539901FFB7B9A0DBZZqqmusic_default/qmmv_0a6bvbjvbmcvatqma4ca2cioa4bvvwdax43qr3shjyhq4byobybq.f9814.mp4?fname=qmmv_0a6bvbjvbmcvatqma4ca2cioa4bvvwdax43qr3shjyhq4byobybq.f9814.mp4'
        }else if(this.name === 'sj'){
          this.rainbow = ['','']
          this.vipRank = 2
          this.access = '高极用户，提供彩虹屁二条，经典MV'
          this.mvUrl = 'https://apd-29a10f023a5def008afc822c24ba4eb6.v.smtcdns.com/mv.music.tc.qq.com/Ai69ITq5yIqKFk83jDldhIIB0lZbyWZtOT7HT7eDeYLQ/44D6F5927C00528E80F459E12FC2B4283F12822FEB2DF0BCC7B2067F1D892FA5B0B90A95DA72F258200805D821332E28ZZqqmusic_default/1049_M2111300003qrWW94ZkPRf1001541740.f40.mp4?fname=1049_M2111300003qrWW94ZkPRf1001541740.f40.mp4'
        }else{
          this.rainbow = ['']
          this.vipRank = 1
          this.access = '普通用户，提供彩虹屁一条，大众MV'
          this.mvUrl = 'https://apd-4b797a844d52e31af99c35ec1f7e48b2.v.smtcdns.com/mv.music.tc.qq.com/Av5Mop88uEUFYYdKmi05yDqquhAqVkOvUmIalCvSdygc/53917470967D0DCB0C5A13F26374B740A3D2A021F9BF672562B79B5CAC72262F705E07C2071B74E949F9589C7015448DZZqqmusic_default/1049_M0106194002rS43Q435F4s1001728826.f9844.mp4?fname=1049_M0106194002rS43Q435F4s1001728826.f9844.mp4'
        }
      }
    }
  };
</script>

<style scoped>
  .collect{
    font-size: 20px;
    color: rgba(0,0,255,0.2);
  }
  .video{
    width: 100%;
  }
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    height: calc((100vh - 60px - 49px - 60px) / 2)
  }
</style>